<template>
	<view class="content">
		<view class="title">注册账号</view>
		<view class="account">
			<view class="text">账号</view>
			<input v-model="phone" type="number" value="" placeholder="请输入手机号" />
		</view>
		<view class="code">
			<view class="text">验证码</view>
			<view class="bottom">
				<input v-model="code" type="number" value="" placeholder="请输入验证码" />
				<button @click="sendCode" :disabled="disable" :class="{ get1: disable }" class="get" plain="true" type="default">
					{{ seconds < 60 ? seconds + '后重新获取验证码' : '获取验证码' }}
				</button>
			</view>
		</view>
		<view class="account">
			<view class="text">密码</view>
			<input type="password" v-model="password" value="" placeholder="请输入密码" />
		</view>
		<view class="account">
			<view class="text">您的姓名</view>
			<input v-model="name" type="text" value="" placeholder="请输入姓名" />
		</view>
		<view class="account">
			<view class="text">您的土地亩数</view>
			<input v-model="landarea" type="text" value="" placeholder="输入您拥有的土地亩数" />
		</view>
		<view class="city">
			<view class="title" @click="city_value = true">选择您的所属乡镇/村庄</view>
			<view class="show">
				<view class="">
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left"><!-- 当前选择 --></view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange1" :value="index1" :range="array1">
									<view class="uni-input">
										{{ array1[index1] }}
										<image style="width: 28upx;height: 28upx;" src="../../static/xiala.png" mode=""></image>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left"></view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange3" :value="index3" :range="array3">
									<view class="uni-input">
										{{ array3[index3] }}
										<image style="width: 28upx;height: 28upx;" src="../../static/xiala.png" mode=""></image>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left"><!-- 当前选择 --></view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange2" :value="index2" :range="array2">
									<view class="uni-input">
										{{ array2[index2] }}
										<image style="width: 28upx;height: 28upx;" src="../../static/xiala.png" mode=""></image>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left"><!-- 当前选择 --></view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange4" :value="index4" :range="array4">
									<view class="uni-input">
										{{ array4[index4] }}
										<image style="width: 28upx;height: 28upx;" src="../../static/xiala.png" mode=""></image>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<button @tap="submitRegister" class="btn" type="default" :disabled="is_btn" :class="{ get1: is_btn }">注册</button>

		<!-- 注册协议 -->
		<view class="radioPrivacyBox">
			<view class="radioPrivacyBox1">
				<radio value="" style="transform:scale(0.6)" :checked="show" @click="dianji" />
				<view style="margin-left: -10rpx;" @click="tiaozhuanxy">《注册协议》</view>
			</view>
		</view>

		<!-- <city-select v-model="city_value" @city-change="cityChange"></city-select> -->
	</view>
</template>

<script>
import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue';
import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue';
import citySelect from './../u-city-select.vue';
export default {
	components: {
		citySelect,
		msDropdownMenu,
		msDropdownItem
	},
	data() {
		return {
			show: false,
			city_value: false, //地址打开
			input: '',
			city1: '', //省
			city2: '', //市
			city3: '', //区
			is_btn: false,
			phone: '', //手机号
			code: '', //验证码
			password: '', //密码
			name: '', //姓名
			landarea: '', //您的土地亩数
			seconds: 60, //倒计时
			disable: false, //验证码倒计时
			list: [], //地址县
			listch: [],
			value: 0,
			list1: [], //地址乡
			value1: 0,
			list2: [], //地址镇
			value2: 0,
			list3:[],
			value3:0,
			index: 0,
			index1: 0,
			index2: 0,
			index3: 0,
			index4: 0,
			array: ['请选择'],
			arrayid: [0],
			array1: ['请选择'],
			arrayid1: [0],
			array2: ['请选择'],
			arrayid2: [0],
			array3: ['请选择'],
			arrayid3: [0],
			array4: ['请选择'],
			arrayid4: [0],
			lastid: null,
			cityid: null,
			areaid: null,
			fourid: null
		};
	},
	created() {},
	onLoad() {
		this.loadCity();
	},
	onShow() {
		this.show = this.show;
	},
	methods: {
		// 选中某个单选框时
		dianji() {
			if (this.show == true) {
				this.show = false;
			} else {
				this.show = true;
			}
		},
		//注册协议
		tiaozhuanxy() {
			uni.navigateTo({
				url: '/pages/enter/xieyi'
			});
		},

		bindPickerChange1(e) {
			// console.log('bindPickerChange1');
			// console.log(this.array1);
			// console.log('111##########################');
			this.index1 = e.target.value;
			let id = this.arrayid1[this.index1];
			this.cityid = this.array1[this.index1];
			this.index2 = 0;
			this.index3 = 0;
			this.index4=0
			this.array4 = ['请选择'];
			this.array3 = ['请选择'];
			this.array2 = ['请选择'];
			this.loadArea(id);
		},
		bindPickerChange3(e) {
			// console.log('bindPickerChange3');
			// console.log(e);
			// console.log(this.array3);
			// console.log(this.arrayid3)
			// console.log("####3333333333333333333333333")
			this.index3 = e.target.value;
			this.array2 = ['请选择'];
			this.array4=['请选择']
			let id = this.arrayid3[this.index3];
			this.areaid = this.array3[this.index3];
			this.index2 = 0;
			this.index4=0
			this.loadStreet(id);
		},
		bindPickerChange2(e) {
			// console.log('bindPickerChange2');
			// console.log(e);
			// console.log(this.array2);
			// console.log(this.arrayid2)
			// console.log("###22222222222222222222222222222")
			this.index2 = e.target.value;
			this.array4 = ['请选择'];
			this.index4=0
			let id = this.arrayid2[this.index2];
			this.lastid = this.array2[this.index2];
			this.loadFour(id);
		},
		bindPickerChange4(e) {
			console.log('bindPickerChange4');
			this.index4 = e.target.value;
			// this.room_no = this.array2[this.index2]
			this.fourid = this.array4[this.index4];
			console.log(this.array4)
		},
		//获取验证码
		sendCode() {
			let that = this;
			if (!/^1[3456789]\d{9}$/.test(this.phone.trim())) {
				this.$u.toast('请输入正确的手机号');
				return;
			}
			this.$http
				.post('/api/sms/send', {
					mobile: this.phone,
					event: 'register'
				})
				.then(res => {
					// console.log(res)
					this.$u.toast('验证码已发送');
					let interval = setInterval(() => {
						--that.seconds;
					}, 1000);
					this.disable = true;
					setTimeout(() => {
						clearInterval(interval);
						that.disable = false;
						that.seconds = 60;
					}, 60000);
				});
		},
		submitRegister() {
			if (!/^1[3456789]\d{9}$/.test(this.phone.trim())) {
				this.$u.toast('请输入正确的手机号');
				return;
			}
			if (this.code == '') {
				this.$u.toast('请输入验证码');
				return;
			}
			if (this.password == '') {
				this.$u.toast('请输入密码');
				return;
			}
			if (this.name == '') {
				this.$u.toast('请输入姓名');
				return;
			}
			if (this.landarea == '') {
				this.$u.toast('请输入土地亩数');
				return;
			}
			if (this.cityid == null || this.areaid == null || this.lastid == null) {
				this.$u.toast('请选择所属乡镇/村庄');
				return;
			}
			if (!this.show) {
				this.$u.toast('请勾选注册协议');
				return;
			}

			this.$http
				.post('/api/user/register', {
					mobile: this.phone,
					password: this.password,
					code: this.code,
					nickname: this.name,
					city: this.cityid,
					area: this.areaid,
					street: this.lastid,
					village:this.fourid,
					landarea: this.landarea
				})
				.then(res => {
					uni.navigateBack({
						delta: 1
					});
				});
		},
		loadFour(id) {
			this.$http
				.post('/api/index/address', {
					parent_id: id
				})
				.then(res => {
					console.log("loadfour")
					this.array4 = ['请选择'];
					this.arrayid4 = [''];
					for (let i = 0; i < res.data.data.length; i++) {
						this.array4.push(res.data.data[i].name);
						this.arrayid4.push(res.data.data[i].id);
					}
					console.log(this.array4)
					console.log(this.arrayid4)
				});
		},
		loadCity() {
			this.$http.post('/api/index/address').then(res => {
				this.loadArea(res.data.data[0].id);
				console.log('this.loadcity');
				for (let i = 0; i < res.data.data.length; i++) {
					this.array1.push(res.data.data[i].name);
					this.arrayid1.push(res.data.data[i].id);
				}
				// console.log(this.array1);
				// console.log(this.arrayid1);
				// console.log('#iloadcityloadcityloadcity');
			});
		},
		loadArea(id) {
			this.$http
				.post('/api/index/address', {
					parent_id: id
				})
				.then(res => {
					this.array3 = ['请选择'];
					this.arrayid3 = [''];
					console.log('loadraesdd');
					for (let i = 0; i < res.data.data.length; i++) {
						this.array3.push(res.data.data[i].name);
						this.arrayid3.push(res.data.data[i].id);
					}
					// console.log(this.array3);
					// console.log(this.arrayid3);
					// console.log('#######areaareaareeaddsaa');
					this.loadStreet(res.data.data[0].id);
				});
		},
		loadStreet(id) {
			this.$http
				.post('/api/index/address', {
					parent_id: id
				})
				.then(res => {
					this.array2 = ['请选择'];
					this.arrayid2 = [''];
					console.log('loadstreet');
					for (let i = 0; i < res.data.data.length; i++) {
						this.array2.push(res.data.data[i].name);
						this.arrayid2.push(res.data.data[i].id);
					}
					// console.log(this.array2);
					// console.log(this.arrayid2);
					// console.log('#######strretsterruesuueyeyetytee');

					this.loadFour(res.data.data[0].id);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	// width: 535rpx;
	margin: 0 auto;
	padding-bottom: 50rpx;
}
.radioPrivacyBox1 {
	width: 250rpx;
	height: 40rpx;
	margin: 30rpx auto;
	display: flex;
	align-items: center;
	.radio {
	}
}
.title {
	width: 535rpx;
	margin: 0 auto;
	font-size: 28px;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	margin-top: 124rpx;
	margin-bottom: 24rpx;
}

.account {
	width: 535rpx;
	margin: 0 auto;
	margin-top: 82rpx;

	.text {
		font-size: 20px;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(51, 51, 51, 1);
	}

	input {
		border: none;
		outline: none;
		border-bottom: 1px solid #999999;
		display: block;
		width: 100%;
		height: 70rpx;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		min-height: none;
	}
}

.code {
	width: 535rpx;
	margin: 0 auto;
	margin-top: 82rpx;

	.text {
		font-size: 20px;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(51, 51, 51, 1);
	}

	.bottom {
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1px solid #999999;
		padding-bottom: 30rpx;
		box-sizing: border-box;

		input {
			border: none;
			outline: none;
			display: block;
			flex: 1;
		}

		.get {
			border: none;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(63, 195, 119, 1);
		}

		.get1 {
			color: #999999;
			border: 1upx solid #d2d2d2;
			border-radius: 1upx solid #d2d2d2;
		}
	}
}

.city {
	width: 690rpx;
	margin: 0 auto;

	// margin-top: 58rpx;
	.title {
		font-size: 20px;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(51, 51, 51, 1);
		margin-top: 88rpx;
	}

	.show {
		display: flex;
		justify-content: space-around;
		align-items: center;

		text {
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: 800;
			color: rgba(51, 51, 51, 1);
			margin-top: 54rpx;
		}
	}
}

.btn {
	margin-top: 60rpx;
	width: 535rpx;
	height: 88rpx;
	background: rgba(63, 195, 119, 1);
	border-radius: 10px;
	color: rgba(255, 255, 255, 1);
}
</style>
